<template>
	<navigator class="padding flex justify-between align-center bg-white my-outline" :url="'/pages/teacherInfo/teacherInfo?teacherId='+courseDetailsList.teacher.id">
		<view class="flex align-center">
			<image class="cu-avatar lg round margin-right-sm" 
			:src="courseDetailsList.teacher.avatar==null||courseDetailsList.teacher.avatar==''?'/static/image/errorAvatar.svg':courseDetailsList.teacher.avatar" mode="aspectFill" 
			:lazy-load="true" @error="imgError">
			</image>
 
			<view>
				<view class="flex align-center padding-bottom-xs">
					<view class="padding-right-sm text-lg text-black">{{courseDetailsList.course_name}}</view>
					<my-tag :tag="courseDetailsList.tag"></my-tag>
				</view> 
				<view class="text-left">
					<text class="padding-right-sm text-lg text-black">{{courseDetailsList.teacher.teacher_name}}</text>
					<text class="text-lg" style="color:#999;">{{courseDetailsList.teacher.level}}</text>
				</view>
			</view>
		</view>
		<view class="text-price text-red" style="font-size:40upx;" v-if="courseDetailsList.unit_price">{{courseDetailsList.unit_price}}</view>
	</navigator>
</template>

<script>
	import myTag from '@/components/my-tag.vue'
	import {mapState} from 'vuex'
	
	export default {
		components:{
			myTag
		},
		data() {
			return {
				
			};
		},
		onLoad() {
		},
		props: {
		
		},
		computed: {
			...mapState(['courseDetailsList'])
		},
		methods: {
			// 图片加载失败
			imgError: function () {
				this.$store.state.courseDetailsList.teacher.avatar = '/static/image/errorAvatar.svg'
			}
		}
	}
</script>

<style lang="scss">

</style>
